<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="wordstyle.css">

</head>

<body>

    <!-- 大标题 -->
    <h1>&lt;p&gt;：段落元素</h1>

    <div class="paragraph">
        <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML">HTML</a><code><small><strong>&lt;p&gt;</strong></small></code>元素表示文本的一个段落。在视觉媒体中，段落通常表现为用空行和/或首行缩进与相邻段落分隔的文本块，但
        HTML段落可以是相关内容的任何结构分组，如图像或表格字段。</div>

    <div class="paragraph">
        段落是<a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Block-level_content">块级元素</a>，如果在关闭的<code>&lt;/p&gt;</code>标签之前解析了另一个块级元素，则该标签将自动关闭。请参阅下面的“标签省略”。
    </div>

    <!-- 第一部分内容,尝试一下 -->
    <div class="front" id="尝试一下">
        <a href="#尝试一下">尝试一下</a>
    </div>

<div id="changshiyixia">

    <div style="display: inline;"><h4 style="display: inline;" class="output-heading">HTML Demo: &lt;p&gt;</h4> <button id="reset" class="reset" type="button">Reset</button>
    </div>

    <div>
        html css 
    </div>

    <div>
        < p>
            Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Antarctica.
          < /p>
          
          < p>Some species live in houses where they hunt insects attracted by artificial light.< /p>
    </div>
    
    
</div>

    <!-- “尝试一下”的表格 -->
    <table id="table_1">

        <tr>
            <th><a href="">内容分类</a></th>
            <td><a href="">流式内容</a>、可感知内容</td>
        </tr>

        <tr>
            <th>允许的内容类型</th>
            <td><a href="">短语内容</a></td>
        </tr>

        <tr>
            <th>标签省略</th>
            <td>
                开始标签是必要的。如果 &lt;p&gt; 元素后面紧跟
                &lt;address&gt;、&lt;article&gt;、&lt;aside&gt;、&lt;blockquote&gt;、&lt;div&gt;、&lt;dl&gt;、&lt;fieldset&gt;、&lt;footer&gt;、&lt;form&gt;、h1、h2、h3、h4、h5、h6、&lt;header&gt;、&lt;hr&gt;、&lt;menu&gt;、&lt;nav&gt;、&lt;ol&gt;、&lt;pre&gt;、&lt;section&gt;、&lt;table&gt;、&lt;ul&gt;
                或其他 &lt;p&gt; 元素，或者父元素中已没有内容，且父元素不是 &lt;a&gt; 元素，则可以省略结束标签。
            </td>
        </tr>

        <tr>
            <th>允许的父元素</th>
            <td>任何接受<a href="">流式内容</a>的元素。</td>
        </tr>

        <tr>
            <th>隐式ARIA角色</th>
            <td><a href="">paragraph(en-US)</a></td>
        </tr>

        <tr>
            <th>允许的ARIA角色</th>
            <td>任意</td>
        </tr>

        <tr>
            <th>DOM接口</th>
            <td><a href="">HTMLParagraphElement</a></td>
        </tr>
    </table><br>

    <!-- 第二个二级标题，属性 -->
    <div class="front"><a href="#属性" id="属性">属性</a></div>
    <div class="paragraph">这个元素包含<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>
    </div>

    <div class="notecardnote">
        <p><strong>备注：</strong> <code>&lt;p&gt;</code> 标签的 <code>align</code> 属性已被弃用，请不要使用。</p>
    </div>

    <!-- 第三个二级标题，示例 -->
    <div class="front"><a href="#示例" id="示例">示例</a></div>
    <div>
        <div class="second">HTML</div>
        HTML
        <button type="button" class="mybtn">Play</button>
        <button type="button" class="mybtn">左箭头</button>
    </div>
    <pre>
        &lt;p&gt;这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。&lt;/p&gt;
        &lt;p&gt;这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。&lt;/p&gt;
    </pre>

    <div class="second">运行结果</div>
    <div>
        <div>
            <button type="button" class="mybtn">play</button>
        </div>
        <pre>
            这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。

            这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。
        </pre>
    </div>

    <!-- 第四个二级标题 -->
    <div class="front"><a href="#为段落添加样式" id="为段落添加样式">为段落添加样式</a></div>
    <div class="paragraph">默认情况下，浏览器会用一个空行来分隔段落。其他分隔方法，如首行缩进，可以通过<a href="">CSS</a>来实现：</div>

    <div class="second">HTML</div>
    <div>
        <div>
            HTML
            <button type="button" class="mybtn">play</button>
            <button type="button" class="mybtn">左箭头</button>
        </div>
        <pre>
         &lt;p&gt;
           用空行分隔段落最便于读者扫描，但也可以通过缩进首行来分隔段落。这样做通常是为了减少所占空间，例如节省印刷用纸。
         &lt;/p&gt;

         &lt;p&gt;
           学校试卷和草稿等需要编辑的写作，会同时使用空行和缩进进行分隔。在完成的作品中，将两者结合起来会被认为是多余和业余的。
         &lt;/p&gt;

         &lt;p&gt;
           在非常古老的文字中，段落之间用一种特殊的字符：¶（称为&lt;i&gt;段落符号&lt;/i&gt;）分隔。如今，这个符号太密集了，难以阅读。
         &lt;/p&gt;

         &lt;p&gt;
           究竟有多难阅读？自己试一下：
           &lt;button data-toggle-text="换回去！"&gt;使用段落符号分隔段落&lt;/button&gt;
         &lt;/p&gt;
        </pre>
    </div>

    <div class="second">CSS</div>
    <div>
        <div>
            CSS
            <button type="button" class="mybtn">play</button>
            <button type="button" class="mybtn">左箭头</button>
        </div>
        <pre>
            p {
                margin: 0;
                text-indent: 3ch;
              }
              
              p.pilcrow {
                text-indent: 0;
                display: inline;
              }
              p.pilcrow + p.pilcrow::before {
                content: " ¶ ";
              }
        </pre>
    </div>

    <div class="second">JavaScript</div>
    <div>
        <div>
            JS
            <button type="button" class="mybtn">play</button>
            <button type="button" class="mybtn">左箭头</button>
        </div>
        <pre>
            document.querySelector("button").addEventListener("click", (event) => {
                document.querySelectorAll("p").forEach((paragraph) => {
                  paragraph.classList.toggle("pilcrow");
                });
              
                [event.target.innerText, event.target.dataset.toggleText] = [
                  event.target.dataset.toggleText,
                  event.target.innerText,
                ];
              });
        </pre>
    </div>

    <div class="second">运行结果</div>
    <div>
        <div>
            <button type="button" class="mybtn">play</button>
        </div>
        <pre>
            用空行分隔段落最便于读者扫描，但也可以通过缩进首行来分隔段落。这样做通常是为了减少所占空间，例如节省印刷用纸。

            学校试卷和草稿等需要编辑的写作，会同时使用空行和缩进进行分隔。在完成的作品中，将两者结合起来会被认为是多余和业余的。

            在非常古老的文字中，段落之间用一种特殊的字符：¶（称为段落符号）分隔。如今，这个符号太密集了，难以阅读。

            究竟有多难阅读？自己试一下<button type="button">使用段落符号分隔段落</button>
        </pre>
    </div>

    <!-- 第五个二级标题 -->
    <div class="front"><a href="#无障碍考虑" id="无障碍考虑">无障碍考虑</a></div>
    <div class="paragraph">
        将内容分成段落有助于使页面更易于访问。屏幕阅读器和其他辅助技术提供的快捷方式可以让用户跳到下一个或上一个段落，让他们可以略读内容，就像留白可以让视觉用户跳来跳去一样。
    </div>
    <div class="paragraph">
        使用空的<code>&lt;p&gt;</code>元素在段落之间添加空格，对于使用读屏技术浏览的人来说是有问题的。屏幕阅读器可能会显示段落的存在，但不会显示其中包含的任何内容——因为没有内容。这会让使用屏幕阅读器的人感到困惑和沮丧。
    </div>

    <div class="paragraph">
        如果需要额外的空间，可以使用<a href="">CSS</a>，如<a href=""><code>margin</code></a>来创建效果：
    </div>
    <!-- 第六个二级标题 -->
    <div class="front"><a href="#规范" id="规范">规范</a></div>
    <table id="table_2">
        <thead>
            <tr>
                <th>Specification</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><a href="">HTML Standard</a><br><a href="">#the-p-element</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </td>
            </tr>
        </tbody>
    </table>
    <br>

    <!-- 第七个二级标题 -->
    <div class="front">
        <a href="#浏览器兼容性" id="浏览器兼容性">浏览器兼容性</a>
        <div>

        </div class="paragraph">
        <a href="">Report problems with this compatibility data on GitHub</a>
    </div>

    <table id="table_3">
        <tbody>
            <tr>
                <td rowspan="2">1.1</td>
                <td colspan="5">1.2 desktop</td>
                <td colspan="6">1.3 mobile</td>
            </tr>
            <tr>
                <td>Chrome</td>
                <td>Edge</td>
                <td>Firefox</td>
                <td>Opera</td>
                <td>Safari</td>
                <td>Chrome Android</td>
                <td>Firefox for Android</td>
                <td>Opera Android</td>
                <td>Safari on iOS</td>
                <td>Samsung Internet</td>
                <td>WebView Android</td>
            </tr>
            <tr>
                <td><code>p</code></td>
                <td>&radic;1</td>
                <td>&radic;12</td>
                <td>&radic;1</td>
                <td>&radic;15</td>
                <td>&radic;1</td>
                <td>&radic;18</td>
                <td>&radic;4</td>
                <td>&radic;14</td>
                <td>&radic;1</td>
                <td>&radic;1.0</td>
                <td>&radic;4.4</td>
            </tr>
        </tbody>
    </table>

    <div class="tip">
        <em>Tip: you can click/tap on a cell for more information.</em>
        <br>
        &radic;Full support
    </div>

    <!-- 第八个二级标题 -->
    <div class="front">
        <a href="#参见" id="参见">参见</a>
    </div>
    <ul>
        <li><a href="">hr</a></li>
        <li><a href="">br</a></li>
    </ul>

</body>

</html>